<template>
    <view class="container">
        <view class="p-40">
            <view class="member">
                <view class="member-item">
                    <view class="label">昵称</view>
                    <view class="value">{{ memberinfo.nickname }}</view>
                </view>
                <view class="member-item">
                    <view class="label">手机号</view>
                    <view class="value">{{ memberinfo.mobile }}</view>
                </view>
                <view class="member-item">
                    <view class="label">会员卡号</view>
                    <view class="value">{{ memberinfo.code }}</view>
                </view>
                <view class="member-item">
                    <view class="label">钱包余额</view>
                    <view class="value">{{ memberinfo.money }}</view>
                </view>
            </view>
            <view class="form mt-30">
                <view class="text">消费金额</view>
                <view class="money mt-30">
                    <uv-input placeholder="请输入金额" border="bottom" type="number" fontSize="40rpx" v-model="money">
                        <template v-slot:prefix>
                            <uv-text text="￥" margin="0 3px 0 0" type="tips"></uv-text>
                        </template>
                    </uv-input>
                </view>
                <view class="btn-item">
                    <button class="btn" @click="submit">确认消费</button>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { useRequest } from 'alova';
import { memberDetail, memberMoney } from '@/services/api';
import { handleJump, goBack } from '@/utils/common';
import { Toast } from '@/utils/uniapi/prompt';
import { rechargeSubmit } from '@/services/api/recharge';
onLoad((options) => {
    console.log(options);
    code.value = options.code;
    getInit();
});
const money = ref(null);

const code = ref('');
const memberinfo = ref({});
const { send: getMemberDetail } = useRequest(memberDetail, { immediate: false });
const getInit = () => {
    getMemberDetail({ code: code.value }).then((res) => {
        console.log(res);
        memberinfo.value = res;
    });
};

const { send: setMemberMoney } = useRequest(memberMoney, { immediate: false });
const submit = () => {
    if (!money.value) {
        Toast('请输入储值金额');
        return;
    }
    const param = {
        code: code.value,
        money: money.value,
        memo: '店内消费',
    };
    setMemberMoney(param).then(() => {
        Toast('消费成功');
        getInit();
        // setTimeout(function () {
        //     goBack();
        // }, 2000);
    });
};
</script>
<style lang="scss">
.container {
    background-color: #fff;
}
.member {
    .member-item {
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        font-size: 28rpx;
        .label {
            width: 160rpx;
            color: #333;
        }
        .value {
            color: #000;
        }
    }
}
.text {
    font-size: 28rpx;
    color: #333;
}
.btn-item {
    margin-top: 50rpx;
}
.btn {
    width: 560rpx !important;
    height: 80rpx;
    padding: 0;
    text-align: center;
    line-height: 80rpx;
    background-color: #191919;
    // border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
}

.notice {
    margin-top: 50rpx;
    font-size: 28rpx;
}
</style>
